<template>
	<view>
		<!-- #ifdef MP -->
		<nav-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">搜索</block>
		</nav-custom>
		<!-- #endif -->
		<!-- 顶部导航栏 -->
		<view class="header" :style="[{top: isMPheight + 'px'}]">
			<!-- 返回上一页 -->
			<view class="back" @tap="toBack">
				<view class="iconfont icon-zuoyou"></view>
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="请输入商品名称" placeholder-style="color:#c0c0c0;" @input="inputSearch" />
				<view class="iconfont icon-xingtaiduICON_sousuo--"></view>
			</view>
			<!-- 右侧图标按钮 -->
			<view class="icon-btn">
				<view class="iconfont icon-yuyin" @tap="toVoice"></view>
				<view class="iconfont icon-xiaoxi2" :class="{isMsg: isMsg}" @tap="toMsg"></view>
			</view>
		</view>
		<view class="search-cont">
			<view class="search-hot" v-if="inputIsText">
				<view class="search-hot-tit">热门搜索</view>
				<view class="search-hot-list">
					<view class="search-hot-li" v-for="(item,index) in owner" :key="index" :style="{color: index < 3 ? '#e93b3d':''}">{{item}}</view>
				</view>
			</view>
			<view class="search-results" v-else>
				<view class="search-results-li" v-for="(item,index) in searchResults" :key="index">
					<view class="results-tit">{{item.key}}</view>
					<view class="results-list">
						<view class="results-li" v-for="(items,indexs) in item.tag" :key="indexs">{{items.tsh}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMPheight: 0,
				inputIsText: true, //是否输入文字
				isMsg: true, //是否有新消息
				owner: [
					"无线扩音器",
					"脱脂牛奶",
					"按摩椅",
					"烤箱",
					"法兰绒床垫",
					"多肉植物种子",
					"鱼竿",
					"飞科剃须刀",
					"婴儿爬行垫",
					"藤椅摇椅",
					"防水胶",
					"自动吸尘器",
					"风信子种球",
					"桂花乌龙茶",
					"铝合金门窗",
					"养生壶",
					"对讲机",
					"鼠标垫护腕",
					"珀莱雅京妆大牌",
					"漫威须刀新品首发"
				],
				searchResults: [{
						key: "电脑",
						tag: [{
								tse: "笔记本电脑",
								tsh: "笔记本"
							},
							{
								tse: "苹果电脑",
								tsh: "苹果"
							},
							{
								tse: "电脑 主机",
								tsh: "主机"
							}
						]
					},
					{
						key: "电脑桌",
						tag: [{
								tse: "电脑桌 台式",
								tsh: "台式"
							},
							{
								tse: "电脑桌 自营",
								tsh: "自营"
							},
							{
								tse: "床上电脑桌",
								tsh: "床上"
							}
						]
					},
					{
						key: "电脑椅",
						tag: [{
								tse: "电脑椅 京东自营",
								tsh: "京东自营"
							},
							{
								tse: "黑白调电脑椅",
								tsh: "黑白调"
							},
							{
								tse: "电脑椅 游戏椅",
								tsh: "游戏椅"
							}
						]
					},
					{
						key: "电脑主机",
						tag: [{
								tse: "电脑主机 台式组装",
								tsh: "台式组装"
							},
							{
								tse: "电脑主机 自营",
								tsh: "自营"
							},
							{
								tse: "台式机电脑主机",
								tsh: "台式机"
							}
						]
					},
					{
						key: "电脑包",
						tag: [{
								tse: "电脑包 15.6寸",
								tsh: "15.6寸"
							},
							{
								tse: "笔记本电脑包",
								tsh: "笔记本"
							},
							{
								tse: "电脑包 新品",
								tsh: "新品"
							}
						]
					},
					{
						key: "电脑音响"
					},
					{
						key: "电脑笔记本",
						tag: [{
								tse: "苹果电脑笔记本",
								tsh: "苹果"
							},
							{
								tse: "华为电脑笔记本",
								tsh: "华为"
							},
							{
								tse: "戴尔电脑笔记本",
								tsh: "戴尔"
							}
						]
					},
					{
						key: "电脑台式",
						tag: [{
								tse: "苹果电脑台式",
								tsh: "苹果"
							},
							{
								tse: "联想电脑台式",
								tsh: "联想"
							},
							{
								tse: "电脑台式 一体机",
								tsh: "一体机"
							}
						]
					},
					{
						key: "电脑显示器",
						tag: [{
								tse: "电脑显示器 自营",
								tsh: "自营"
							},
							{
								tse: "电脑显示器 32寸",
								tsh: "32寸"
							},
							{
								tse: "电脑显示器 27寸",
								tsh: "27寸"
							}
						]
					},
					{
						key: "电脑支架",
						tag: [{
								tse: "床上电脑支架",
								tsh: "床上"
							},
							{
								tse: "苹果电脑支架",
								tsh: "苹果"
							},
							{
								tse: "电脑支架 颈椎",
								tsh: "颈椎"
							}
						]
					},

				]

			}
		},
		onLoad() {
			// #ifdef MP
			this.isMPheight = this.CustomBar
			// #endif
		},
		methods: {
			/**
			 * 用户输入文字
			 */
			inputSearch(event) {
				if (event.detail.value.toString().length > 0) {
					this.inputIsText = false;
				} else {
					this.inputIsText = true;
				}
			},
			/**
			 * 返回上一页
			 */
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		border-bottom: 2upx solid rgb(229, 229, 229);
		.back {
			width: 70upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;

			.iconfont {
				height: 60upx;
				display: flex;
				align-items: center;
				font-size: 38upx;
				color: #252525;
				font-weight: 600;
			}
		}

		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;

			.iconfont {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			input {
				padding-left: 28upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 28upx;
				width: 100%;
				padding-right: 80upx;
			}
		}

		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.iconfont {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}

			.isMsg {
				position: relative;
				&::after {
					content: "";
					display: block;
					height: 10upx;
					width: 10upx;
					border-radius: 50%;
					background-color: rgb(240, 108, 122);
					position: absolute;
					right: 0upx;
					top: 10upx;
				}
			}
		}
	}


	.search-cont {
		
		padding-top: 100upx;

		.search-hot {
			padding-left: 26upx;

			.search-hot-tit {
				padding-top: 30upx;
				font-size: 30upx;
				line-height: 30upx;
				color: #232326;
			}

			.search-hot-li {
				float: left;
				margin-right: 20upx;
				margin-top: 20upx;
				height: 46upx;
				line-height: 48upx;
				border-radius: 6upx;
				color: #686868;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-color: #f0f2f5;
				padding-left: 26upx;
				padding-right: 26upx;
				overflow: hidden;
				box-sizing: border-box;
				font-size: 24upx;
			}
		}

		.search-results {
			padding-left: 26upx;

			.search-results-li {
				height: 84upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #f0f2f5;

				.results-tit {
					flex: auto;
					color: #333;
					font-size: 26upx;
				}

				.results-list {
					display: flex;
					align-items: center;
					box-sizing: border-box;
					height: 46upx;

					.results-li {
						color: #686868;
						font-size: 24upx;
						display: block;
						height: 46upx;
						padding-left: 20upx;
						padding-right: 20upx;
						background-color: #f0f2f5;
						border-radius: 6upx;
						line-height: 46upx;
						margin-right: 20upx;
					}
				}
			}
		}
	}
</style>
